<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hide {
            display: none;
        }

        table,
        td,
        th {
            border: 1px solid green;
        }

        th {
            background-color: green;
            color: white;
        }

        .c1 {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }

        .c2 {
            width: 500px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -200px;
            z-index: 10;
        }
    </style>
</head>

<body>
    <div>
        <input type="button" value="添加" onclick="ShowModel()" />
        <input type="button" value="全选" onclick="ChooseAll()" />
        <input type="button" value="反选" onclick="CanclAll()" />
        <input type="button" value="取消" onclick="ReverseAll()" />
        <input type="button" value="删除" onclick="RemoveEment()" />
        <input type="button" value="刷新" onclick="restdata()" />
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.1</td>
                    <td>191</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始-->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束-->

    <!--弹出框开始-->
    <div id="i2" class="c2 hide">
        <p><input type="text" id="host" /></p>
        <p><input type="text" id="port" /></p>
        <p>
            <input type="button" value="取消" onclick="CanAdd()">
            <input type="button" value="确定" onclick="AddModel()">
        </p>
    </div>
    <!--弹出框结束-->



    <script>
        function ShowModel() {
            document.getElementById("i1").classList.remove('hide');
            document.getElementById("i2").classList.remove('hide');
        }

        function CanAdd() {
            document.getElementById("i1").classList.add('hide');
            document.getElementById("i2").classList.add('hide');
        }
        function ChooseAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;
            }
        }
        function CanclAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                if (checkbox.checked) {
                    checkbox.checked = false;
                } else {
                    checkbox.checked = true;
                }

            }
        }
        function ReverseAll() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;
            }
        }
        function AddModel() {
            var host = document.getElementById('host').value;
            var port = document.getElementById('port').value;
            console.log(host, port);
            var tbody = document.getElementById('tb');
            var tr = document.createElement('tr')
            var td = document.createElement('td')
            var td1 = document.createElement('td')
            var td2 = document.createElement('td')

            var input1 = document.createElement("input")
            input1.type = "checkbox";
            var txt1 = document.createTextNode(host);
            var txt2 = document.createTextNode(port);

            td1.appendChild(txt1);
            td2.appendChild(txt2);
            td.appendChild(input1);
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tbody.appendChild(tr);

            document.getElementById("i1").classList.add('hide');
            document.getElementById("i2").classList.add('hide');

        }
        function RemoveEment() {
            var tbody = document.getElementById('tb');
            var tr_list = tbody.children;
            for (var i = 0; i < tr_list.length; i++) {
                var checkbox = tr_list[i].children[0].children[0];

                if (checkbox.checked) {
                    tbody.removeChild(tr_list[i]);
                }
            }
        }
        function refreshEment() {
           
            //步骤一:创建异步对象
            var ajax = new XMLHttpRequest();
            //步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
            ajax.open('GET', '/api/v1/host');
            //步骤三:发送请求
            ajax.send();
            //步骤四:注册事件 onreadystatechange 状态改变就会调用
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    var ajax_host_data;
                    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
                    //console.log(ajax.responseText);//输入相应的内容
                    ajax_host_data = ajax.responseText;
                }
                
            }
            return ajax_host_data;
        }
        function restdata(){
            ajax_method('/api/v1/host','','GET',restapi);
        }
        
        function restapi(host_data){
            var host_data = host_data; 
            console.log(host_data);
            var host = JSON.parse(host_data);
            for (var i = 0; i < host.length; i++) {
                restModel(host[i].ip,host[i].port);
                console.log(host[i].ip,host[i].port);
            }
        }
        function restModel(ip, port) {

            console.log(host, port);
            var tbody = document.getElementById('tb');
            var tr = document.createElement('tr')
            var td = document.createElement('td')
            var td1 = document.createElement('td')
            var td2 = document.createElement('td')

            var input1 = document.createElement("input")
            input1.type = "checkbox";
            var txt1 = document.createTextNode(ip);
            var txt2 = document.createTextNode(port);

            td1.appendChild(txt1);
            td2.appendChild(txt2);
            td.appendChild(input1);
            tr.appendChild(td);
            tr.appendChild(td1)
            tr.appendChild(td2);
            tbody.appendChild(tr);
        }
        
        function postrequest() {
            //创建异步对象  
            var xhr = new XMLHttpRequest();
            //设置请求的类型及url
            //post请求一定要添加请求头才行不然会报错
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.open('post', '02.post.php');
            //发送请求
            xhr.send('name=fox&age=18');
            xhr.onreadystatechange = function () {
                // 这步为判断服务器是否正确响应
                if (xhr.readyState == 4 && xhr.status == 200) {

                    console.log(xhr.responseText);
                }
            };
        }

        function ajax_method(url, data, method, success) {
            // 异步对象
            var ajax = new XMLHttpRequest();

            // get 跟post  需要分别写不同的代码
            if (method == 'get') {
                // get请求
                if (data) {
                    // 如果有值
                    url += '?';
                    url += data;
                } else {

                }
                // 设置 方法 以及 url
                ajax.open(method, url);

                // send即可
                ajax.send();
            } else {
                // post请求
                // post请求 url 是不需要改变
                ajax.open(method, url);

                // 需要设置请求报文
                ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                // 判断data send发送数据
                if (data) {
                    // 如果有值 从send发送
                    ajax.send(data);
                } else {
                    // 木有值 直接发送即可
                    ajax.send();
                }
            }

            // 注册事件
            ajax.onreadystatechange = function () {
                // 在事件中 获取数据 并修改界面显示
                if (ajax.readyState == 4 && ajax.status == 200) {
                    // console.log(ajax.responseText);
                    
                    
                    // 当 onreadystatechange 调用时 说明 数据回来了
                    // ajax.responseText;

                    // 如果说 外面可以传入一个 function 作为参数 success
                    success(ajax.responseText);
                    // 将 数据 让 外面可以使用
                    return ajax.responseText;
                }
            }

        }

        function onmose(){
            var tal = document.getElementsByTagName("tr");
            var len=tal.length;
            for(var i=0; i <len; i++){
                tal[i].onmouseover = function(){
                    console.log("123")
                    this.style.backgroundColor="red";
                }
                tal[i].onmouseout = function(){
                    this.style.backgroundColor="";    
                }
            }
        }
        onmose();
    </script>
</body>

</html>